<template>
    <div class="item" > <!--去拼团单项-->
        <div class="top">
            <div class="face">
                <img :src="itemDate.face" alt="">
            </div>
            <div class="user-info">
                <p class="_style-fs14">{{itemDate.uname}}</p>
                <span class="_style-fs11">{{itemDate.register_time}}</span>
            </div>
            <span class="floor">{{ind+1}}楼</span>
        </div>
        <div class="_style-fs14 van-multi-ellipsis--l3 words">{{itemDate.comments}}</div>
        <div class="fs-small">
            <p class="_style-fs11">{{itemDate.itemDateline}}</p>
            <p class="_style-fs11">{{itemDate.attribute}}</p>
        </div>
        <div class="conment-img-list" v-if="itemDate.img_paths">
            <img v-for="(item, ind) in itemDate.img_paths" :src="item.small_img" @click="handleImagePreview (itemDate.img_paths, ind)" :key="ind" alt="">
        </div>
        <van-image-preview v-model="show" :images="images" @change="onChange" /> <!--大图预览-->
        <div class="conment-praise _style-fs12">
            <span @click="addOne('reply_num')"><van-icon name="comment-o" />{{itemDate.reply_num | hasNum('评论')}}</span>
            <span  @click="addOne('like')"><van-icon name="like-o" />{{itemDate.like | hasNum('有用')}}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: "item",
    props: {
        date: {
            type:Object,
            required: true,
            default: null
        },
        ind: {
            type:Number,
            required: true,
        }
    },
    data() {
        return {
            itemDate: this.date,
            show: false,
            index: 0,
            images: [
                'https://img.yzcdn.cn/1.jpg',
                'https://img.yzcdn.cn/2.jpg'
            ] // 初始图片
        }
    },
    methods: {
        handleImagePreview (list, ind) {
            this.images = this.filterImg(list);
            this.index = ind;
            this.show = true
        }, // 点击事件开始大图预览
        onChange(index) {
            this.index = index;
        }, // 大图预览滑动显示大图
        filterImg(arr) {
            return arr.map(item => {
                if(item.is_vodeo !== 0) {
                    return item.large_img
                }
            })
        }, // map提取过滤图片
        addOne( obj ){
            if (typeof(this.itemDate[obj]) === 'number') {
                this.itemDate[obj]++
            } else {
                this.itemDate[obj] = 1
            }
        } // 点击加1
    },
    filters: {
        hasNum(nums, text) { // 过滤器 检查数字是否存在 如果不存在返回预设的文字
            if (nums === '') {
                return text
            }
            return nums
        }
    }
}
</script>

<style scoped lang="scss">
.item{
    width: 100vw;
    position: relative;
    background-color: #fff;
    padding: 10px 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    .top{
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        margin-bottom: 10px;
        position: relative;
        .face{
            width: 9.4vw;
            height: 9.4vw;
            border-radius: 50%;
            border: 1px solid #f0f0f0;
            overflow: hidden;
            margin-right:10px;
        }
        .floor{
            position: absolute;
            right: 10px;
            top: 50%;
            color: $color-v4;
            transform: translateY(-50%);
        }
    }
    .words{
        margin: 10px 0;
    }
    .fs-small{
        padding: 5px 0;
    }
    .conment-img-list{
        overflow: hidden;
        padding: 5px 0;
        img{
            max-width: 270px;
            max-height: 270px;
            height: 29.7vw;
            width: 29.7vw;
            margin-right: 5px;
            float: left;
        }
    }
    .conment-praise{
        padding: 5px 0;
        text-align: right;
        &>span{
            margin-right: 10px;
        }
        .van-icon{
            padding-right: 5px;
        }
    }
}
</style>
